<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>微博</title>
    <link href="style/weibo.css" rel="stylesheet" type="text/css"/>
    <script src="lib/react.development.js"></script>
    <script src="lib/react-dom.development.js"></script>
    <script src="lib/babel.min.js"></script>
    <script src="node_modules/axios/dist/axios.min.js"></script>
</head>

<body>
<div class="jyArea">

</div>
</body>
<script type="text/babel">
    const request = axios.create({
        baseURL:"http://192.168.12.31:8081"
    })
    request.interceptors.response.use(res=>{
        const {ok,msg} = res.data;
        if(ok === -1){
            alert(msg);
            return new Promise(()=>{});
        }
        return res.data;
    })
    class App extends React.Component {
        content = React.createRef();
        state = {
            contentList:[],// 保存微博列表
        }
        // 添加微博
        async addWeibo(){
            // 获取微博内容
            const content = this.content.current.value.trim();
            // 判断是否拥有微博内容
            if(content.length === 0){
                alert("请输入微博内容")
                return;
            }
            // 发送添加微博的请求
            const result = await request.post("/weibo",{
                content
            })
            // 清空微博输入框
            this.content.current.value = null;
            this.getWeibo();
        }
        // 获取微博
        async getWeibo(){
            const {contentList} = await request.get("/weibo",{
                params:{
                    pageNo:1,
                    pageSize:5
                }
            })
            this.setState({
                contentList
            })
        }
        componentDidMount(){
            this.getWeibo();
        }
        render() {
            return (
                <>
                    <div className="takeComment">
                        <textarea ref={this.content} name="textarea" className="takeTextField" id="tijiaoText"></textarea>
                        <div className="takeSbmComment">
                            <input onClick={this.addWeibo.bind(this)} type="button" className="inputs" value=""/>
                        </div>
                    </div>


                    <div className="commentOn">
                        <div className="noContent" style={{display:this.state.contentList.length===0?"block":"none"}}>暂无留言</div>
                        <div className="messList">
                            {
                                this.state.contentList.map(item=>(
                                    <div key={item._id} className="reply">
                                        <p className="replyContent">{item.content}</p>
                                        <p className="operation">
                                            <span className="replyTime">{item.addTime}</span>
                                            <span className="handle">
                                                <a href="" className="top">{item.topNum}</a>
                                                <a href="" className="down_icon">{item.downNum}</a>
                                                <a href="" className="cut">删除</a>
                                            </span>
                                        </p>
                                    </div>
                                ))
                            }

                        </div>
                        <div className="page">
                            <a href="" className="active">1</a>
                            <a href="">2</a>
                            <a href="">3</a>
                        </div>
                    </div>
                </>
            )
        }
    }
    ReactDOM.createRoot(document.querySelector(".jyArea")).render(<App/>)
</script>
</html>
